<template>
	<view class="pages">
		<view class="contnet" @click.stop="$imgShow(dtailData.cover)">
			<image :src="dtailData.cover" mode="widthFix" style="width: 100%;"></image>
		</view>
		<view class="items">
			<view class="itemsRight">
				<view class="itemsRightTxt">
					{{hotLength(dtailData.title,50) || ''}}
				</view>
				<view class="itemsRightDate">
					{{dtailData.lecturer}}
				</view>
				<view class="itemsRightDate">
					{{dtailData.courseDescription || ''}}
				</view>
				<view class="aderrs">
					{{`${dtailData.speechTime}  ${dtailData.address}`}}
				</view>
				<view class="aderrs" v-if="dtailData.isRecord == 0">
					{{`zoom : ${dtailData.zoom} ${$t('login.Password')} : ${dtailData.password}`}}
				</view>
			</view>
		</view>
		<!-- 已标记 -->
		<view class="btn" v-if="dtailData.isRecord == 0">
			<view>
				<u-button type="primary" :text="$t('Course.Zoomlink')"
					:customStyle="{width:'642rpx',height:'80rpx',backgroundColor:'#fff',color:'#273562',margin:'20px auto 00rpx',fontWeight:'700',border:'none',borderRadius: '16rpx',border:'2rpx solid #273562'}"
					@click="launchApp(dtailData.link)"></u-button>
				<u-button type="primary" :text="$t('Course.DownloadPoster')"
					:customStyle="{width:'642rpx',height:'80rpx',backgroundColor:'#fff',color:'#273562',margin:'20px auto 30rpx',fontWeight:'700',border:'2rpx solid #273562',borderRadius: '16rpx'}"
					@click="save(dtailData.cover)"></u-button>
			</view>
		</view>
		<!-- 未标记 -->
		<view class="btn" v-else>
			<view class="biaoji" @click.stop="gobiaoji()">
				{{$t('Course.Register')}}
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				newUrl: 0, //0为新接口1为老接口
				id: null,
				dtailData: {},
				isRecord: false,
				userInfo: {
					...JSON.parse(uni.getStorageSync('user'))
				},
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getcourseDetail()
		},
		methods: {
			// 获取详情数据
			getcourseDetail(id) {
				uni.showLoading({
					title: this.$t('Laoding'),
				})
				this.$get(`/biz/app/courseDetail`, {
					userId: this.userInfo.id,
					id: this.id
				}, this.newUrl).then(res => {
					this.dtailData = res.data.data

				})
			},
			// 文字超出打点
			hotLength(val, len) {
				if (val) {
					return `${val.substring(0,len)}...`
				} else {
					return val
				}
			},
			// 图片存相册
			save(imgurl) {
				let tip = 'Course.DownloadPostertps'
				this.$savePhoto(imgurl, tip)
			},
			// 去标记
			gobiaoji() {
				uni.showLoading({
					title: this.$t('Laoding'),
				})
				this.$get(`/biz/app/recordCourse`, {
					userId: this.userInfo.id,
					courseId: this.dtailData.id

				}, this.newUrl).then(res => {
					if (res.status) {
						this.getcourseDetail()
					}
				})
			},
			// 打开第三方应用程序
			launchApp(zoomLink) {
				void plus.runtime.openWeb(zoomLink)
			}
		}
	}
</script>

<style>
	.pages {
		width: 100%;
		height: 100vh;
		overflow-y: auto;
		box-sizing: border-box;
		background-color: #fff;
	}

	.contnet {
		position: relative;
		width: 100%;
		/* height: 850rpx; */
		/* background-color: #2735625E; */
	}

	.items {
		width: 100%;
		/* height: 418rpx; */
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 26rpx;
		padding: 26rpx;
		box-sizing: border-box;
	}

	.itemsRightTxt {
		font-family: Montserrat;
		font-size: 32rpx;
		font-weight: 700;
		letter-spacing: 0.20000000298023224px;
		text-align: left;
		margin-top: 15rpx;

	}

	.itemsRightDate {

		font-family: Montserrat;
		font-size: 16px;
		font-weight: 400;
		line-height: 15px;
		letter-spacing: 0.20000000298023224px;
		text-align: left;
		margin-top: 15rpx;
		color: #808080;
	}

	.biaoji {
		width: 642rpx;
		height: 80rpx;
		background-color: #273562;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		margin: 0px auto 00rpx;
		border-radius: 16rpx;
	}

	.biaoji:active {
		/* background-color: #808080; */
		background-color: #384d8d;

	}

	.aderrs {
		font-size: 28rpx;
		color: #808080;
		margin-top: 30rpx;
	}
</style>